import React, { Component } from "react";
import { Link } from "react-router-dom";

const links = [
  {
    hash: "/a/a11",
    name: "a/a11"
  },
  {
    hash: "/a/a12",
    name: "a/a12"
  },
  {
    hash: "/a/a13",
    name: "a/a13"
  },
  {
    hash: "/b/b11",
    name: "b/b11"
  },
  {
    hash: "/b/b12",
    name: "b/b12"
  },
  {
    hash: "/b/b13",
    name: "b/b13"
  },
  {
    hash: "/b/b14",
    name: "b/b14"
  },
  {
    hash: "/b/b15",
    name: "b/b15"
  }
];

class Menu extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    console.log(this.props.location);
    let pathname = this.props.location.pathname;
    return (
      <div className="menuWrap">
        {links.map((val, index) => {
          if (pathname.indexOf(val.hash) > -1) {
            return (
              <div key={index} className="active">
                <Link to={val.hash}>{val.name}</Link>
              </div>
            );
          }
          return (
            <div key={index}>
              <Link to={val.hash}>{val.name}</Link>
            </div>
          );
        })}
      </div>
    );
  }
}

export default Menu;